<template lang="pug">
    .json-editor-wrapper
        BaseEditor(
            ref="json-editor",
            mode="json",
            :theme='theme',
            :content="content",
            fontSize="14px",
            :width="width",
            :height="height",
            :sync="sync",
            :read-only="readOnly",
            @on-change="handleOnChange")
</template>

<script>
import BaseEditor from './base-edior.vue'

export default {
    props: {
        content: {
            type: String,
            default: ''
        },
        height: {
            type: String,
            default: '600px'
        },
        width: {
            type: String,
            default: '100%'
        },
        sync: {
            type: Boolean,
            default: false
        },
        theme: {
            type: String,
            default: 'monokai'
        },
        readOnly: {
            type: Boolean,
            default: false,
        },
    },
    components: {
        BaseEditor
    },
    methods: {
        handleGetValue() {
            return this.$refs['json-editor'].handleGetValue()
        },
        handleOnChange(value) {
            this.$emit('on-change', value)
        },
        // eslint-disable-next-line consistent-return
        setValue(newContent) {
            // eslint-disable-next-line unicorn/no-this-assignment
            const vm = this
            if (vm.sync) {
                return this.$refs['json-editor'].setValue(newContent)
            }
        },
        handleCopy() {
            const text = this.handleGetValue()
            if (!text) {
                this.$message.warning('无内容可复制')
                return
            }
            const element = document.createElement('textarea')
            element.value = text
            element.style.position = "fixed"
            document.body.append(element)
            element.select()
            try {
                document.execCommand("copy")
                this.$message.success('内容已复制到剪切板')
            } catch (error) {
                console.log(`内容无法复制到剪贴板: ${error}`)
            }
            element.remove()
        },
    },
    computed: {},
    filters: {}
}
</script>

<style lang="scss" scoped>
.json-editor-wrapper {
    height: 100%;
}
</style>
